<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>平台财务管理</el-breadcrumb-item>
        <el-breadcrumb-item>冷钱包管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-select v-model="filters.accountType" clearable placeholder="币种" style="width: 100px;">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.satrtDate" type="datetime" placeholder="开始日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker v-model="filters.endDate" type="datetime" placeholder="结束日期" default-time="12:00:00">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
        <el-col :span="12">
          <div id="shareDataset" style="width:100%; height:400px;"></div>
        </el-col>
      <el-col :span="24" style="margin-top:50px;margin-left: 10px;font-size: 24px;">
        <el-form>
          <el-form-item style="font-size:24px;">
            公式：
          </el-form-item>
        </el-form>
        <el-form :inline="true" >
          <el-form-item>
            <el-input v-model="withDrawCount" placeholder="充值" @keyup.enter.native="handleSearch"/>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              -
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="imputationCount" placeholder="归集" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              -
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="fee" placeholder="手续费" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              =
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-input v-model="lastCount" placeholder="余额" @keyup.enter.native="handleSearch"/>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
  import echarts from 'echarts'
  import util from '../../common/util'
  import API from '../../api/api_finance';
  import moment from 'moment';
  export default{
    data(){
      return {
        filters: {
          txid: '',
          address: '',
          accountType: '',
          type: '',
          chartBar: null,
          chartPie: null

        },
        options: [{
          value: 'USDT',
          label: 'USDT'
        }, {
          value: 'BITCOIN',
          label: 'BITCOIN'
        },{
          value: 'ETH',
          lable: 'ETH'
        }],
        options2: [{
          value: '1',
          label: '冷钱包->平台预设'
        }, {
          value: '2',
          label: '冷钱包->热钱包'
        }, {
          value: '3',
          label: '未知地址->冷钱包'
        }, {
          value: '4',
          label: '未知地址->热钱包'
        }, {
          value: '5',
          label: '资金归集'
        }],
        imputationCount: 0,
        withDrawCount: 0,
        lastCount: 0,
        fee: 0,
        books: [],
        total: 0,
        page: 1,
        limit: 10,
        loading: false,
        option:[],
        axisData:'',
      }
    },
    methods: {
      handleSearch(){
        this.total = 0;
        this.page = 1;
        this.search();
      },

      //时间格式化
      dateFormat:function(row, column) {
        var date = row[column.property];
        if (date == undefined) {
             return "";
        }
         return moment(date*1000).format("YYYY-MM-DD HH:mm:ss");
      },

      filterTag(value, row) {
        return row.type === value;
      },
      search(){
        let that = this;
        let params = {
          coinType : this.filters.accountType,
          startTime : this.filters.satrtDate,
          endTime : this.filters.endDate
        };
        that.loading = true;
        API.findWalletFinanceList(params).then(function (result) {
          that.loading = false;
          if (result && result.list) {
            that.total = result.count;
            that.books = result.list;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          console.log(error);
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
    },
    mounted() {
      this.handleSearch();
      this.shareDataset = echarts.init(document.getElementById('shareDataset'));
      this.shareDataset.setOption({
         title: {
                text: '动态数据',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#283b56'
                    }
                }
            },
            legend: {
                data:['最新成交价', '预购队列']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: {
                show: false,
                start: 0,
                end: 100
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function (){
                        var now = new Date();
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                            now = new Date(now - 2000);
                        }
                        return res;
                    })()
                },
                {
                    type: 'category',
                    boundaryGap: true,
                    data: (function (){
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(10 - len - 1);
                        }
                        return res;
                    })()
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    scale: true,
                    name: '价格',
                    max: 30,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                },
                {
                    type: 'value',
                    scale: true,
                    name: '预购量',
                    max: 1200,
                    min: 0,
                    boundaryGap: [0.2, 0.2]
                }
            ],
            series: [
                {
                    name:'预购队列',
                    type:'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data:(function (){
                        var res = [];
                        var len = 10;
                        while (len--) {
                            res.push(Math.round(Math.random() * 1000));
                        }
                        return res;
                    })()
                },
                {
                    name:'最新成交价',
                    type:'line',
                    data:(function (){
                        var res = [];
                        var len = 0;
                        while (len < 10) {
                            res.push((Math.random()*10 + 5).toFixed(1) - 0);
                            len++;
                        }
                        return res;
                    })()
                }
            ]
      });

    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
</style>
